<template>
    <div class="box">
        图层名称：{{ amendName }}
        <br />
        <br />
        步长：<el-button v-for="(cc, index) in clist" :key="cc.name" :type="c === clist[index].value ? 'info' : ''" @click="setc(cc.value)">
            {{ cc.name }}
        </el-button>
        <br />
        <br />
        移动：<el-button v-for="(yy, index) in ylist" :key="yy" @click="sety(yy)">{{ yy }}</el-button>
        <div class="btnbox">
            <el-button type="info" @click="cancel">取消</el-button>
            <el-button type="info" @click="seveData">保存</el-button>
        </div>
    </div>
</template>
<script>
import editorware from '../utils/editorMiddleware'
export default {
    name: 'skewingAmend',
    data() {
        return {
            clist: [
                {
                    name: '0.1',
                    value: 0.000001
                },
                {
                    name: '1',
                    value: 0.00001
                },
                {
                    name: '10',
                    value: 0.0001
                },
                {
                    name: '100',
                    value: 0.001
                }
            ],
            c: 0.0001,
            ylist: ['x+', 'x-', 'y+', 'y-'],
            dlist: [],
            ifMovement: false
        }
    },
    computed: {
        amendName() {
            return this.$store.state.amendName
        },
        amendId() {
            return this.$store.state.amendId
        }
    },
    methods: {
        setc(cc) {
            this.c = cc
        },
        sety(yy) {
            let datas = editorware.coverageMap.get(this.amendId)
            // console.log(datas.tifDataSet)
            this.dlist = JSON.parse(datas.tifDataSet)
            this.dlist.forEach(v => {
                // console.log(editorware.coverageMap.get(v.url))
                let layer = editorware.coverageMap.get(v.url)
                let options = layer.options
                if (yy == 'x+') {
                    v.maxLongitude = options.rectangle.xmax = `${Number(options.rectangle.xmax) + Number(this.c)}`
                    v.minLongitude = options.rectangle.xmin = `${Number(options.rectangle.xmin) + Number(this.c)}`
                    // v.maxLongitude = Number(options.rectangle.xmax) + Number(this.c)
                    // v.minLongitude = Number(options.rectangle.xmin) + Number(this.c)
                } else if (yy == 'x-') {
                    v.maxLongitude = options.rectangle.xmax = `${Number(options.rectangle.xmax) - Number(this.c)}`
                    v.minLongitude = options.rectangle.xmin = `${Number(options.rectangle.xmin) - Number(this.c)}`
                    // v.maxLongitude = Number(options.rectangle.xmax) - Number(this.c)
                    // v.minLongitude = Number(options.rectangle.xmin) - Number(this.c)
                } else if (yy == 'y+') {
                    v.maxLatitude = options.rectangle.ymax = `${Number(options.rectangle.ymax) + Number(this.c)}`
                    v.minLatitude = options.rectangle.ymin = `${Number(options.rectangle.ymin) + Number(this.c)}`
                    // v.maxLatitude = Number(options.rectangle.ymax) + Number(this.c)
                    // v.minLatitude = Number(options.rectangle.ymin) + Number(this.c)
                } else if (yy == 'y-') {
                    v.maxLatitude = options.rectangle.ymax = `${Number(options.rectangle.ymax) - Number(this.c)}`
                    v.minLatitude = options.rectangle.ymin = `${Number(options.rectangle.ymin) - Number(this.c)}`
                    // v.maxLatitude = Number(options.rectangle.ymax) - Number(this.c)
                    // v.minLatitude = Number(options.rectangle.ymin) - Number(this.c)
                }
                //     let layer = editorware.coverageMap.get(v.url)
                // let options = layer.options
                // console.log(v)
                // return
                layer.setOptions(options)
            })
            this.ifMovement = true
        },
        cancel() {
            if (this.ifMovement) {
                this.$alert('此操作图像会恢复到原来位置，并且不会保存数据！', '', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$store.commit('setSkewingAmend', false)
                        let datas = editorware.coverageMap.get(this.amendId)
                        let dlist = JSON.parse(datas.tifDataSet)

                        dlist.forEach(v => {
                            let layer = editorware.coverageMap.get(v.url)
                            let options = layer.options
                            options.rectangle.xmax = Number(v.maxLongitude)
                            options.rectangle.xmin = Number(v.minLongitude)
                            options.rectangle.ymax = Number(v.maxLatitude)
                            options.rectangle.ymin = Number(v.minLatitude)

                            layer.setOptions(options)
                        })
                    }
                })
            } else {
                this.$store.commit('setSkewingAmend', false)
            }
        },
        seveData() {
            let datas = editorware.coverageMap.get(this.amendId)
            // console.log(JSON.stringify(this.dlist))
            console.log(JSON.parse(datas.tifDataSet))
            // console.log(JSON.stringify(this.dlist))
            console.log(this.dlist)
            // datas.tifDataSet = JSON.stringify(this.dlist)
            // return
            this.$request.postForm('/api/map/draw/modifyTifDataSet', { drawId: datas.id, tifDataSet: JSON.stringify(this.dlist) }).then(res => {
                if (res.code == 200) {
                    this.$message.success('修改成功')
                    this.ifMovement = false
                    this.$store.commit('setSkewingAmend', false)
                } else {
                    this.$message.error('修改失败，请稍后再试')
                    let dlist = JSON.parse(datas.tifDataSet)
                    dlist.forEach(v => {
                        let layer = editorware.coverageMap.get(v.url)
                        let options = layer.options
                        options.rectangle.xmax = Number(v.maxLongitude)
                        options.rectangle.xmin = Number(v.minLongitude)
                        options.rectangle.ymax = Number(v.maxLatitude)
                        options.rectangle.ymin = Number(v.minLatitude)

                        layer.setOptions(options)
                    })
                    this.ifMovement = false
                }
            })
        }
    }
}
</script>
<style scoped lang="scss">
.box {
    position: absolute;
    width: 360px;
    height: 200px;
    border: 1px solid rgba(32, 160, 255, 0.3);
    right: 10px;
    top: 48px;
    padding: 10px 20px;
    z-index: 3333;
    background: rgba(30, 36, 50, 0.6);
    border-radius: 5px;
    color: #fff;
    button {
        width: 60px;
        // margin-right: 10px !important;
        // cursor: pointer;
        // margin-bottom: 20px;
        .active {
            background: green;
        }
    }
    .btnbox {
        display: flex;
        justify-content: center;
        margin-top: 30px;
    }
}
</style>
